<!DOCTYPE html> 
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"/> 
<title>jQuery Mobile Web App</title>
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/>
<link href="overlay-callout-panel.css" rel="stylesheet" type="text/css"/>

<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script>
<script src="overlay-callout-panel/js/overlayPanel.min.js" type="text/javascript"></script>

</head> 
<body> 

<div data-role="page" id="page" data-theme="b">
	<div data-role="header">
	  <div class="ui-grid-b">
	    <div class="ui-block-a">
        	<div class="overlay-callout-panel">
    				<div data-role="button" class="overlay-callout-button">Show options</div>
    				<div class="ui-body-b overlay-callout-content" style="width:350px;">
        				<h3>Some content...</h3>
                        <p><i>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</i></p>
        				<div data-role="fieldcontain">
        				  <label for="textinput">Input:</label>
        				  <input type="text" name="textinput" id="textinput" value=""  />
      				  </div>
                      <div data-role="fieldcontain">
        				  <label for="textinput">Input:</label>
        				  <input type="text" name="textinput" id="textinput" value=""  />
      				  </div>
                      <div data-role="fieldcontain">
                        <label for="flipswitch">Option:</label>
                        <select name="flipswitch" id="flipswitch" data-role="slider">
                          <option value="off">Off</option>
                          <option value="on">On</option>
                        </select>
                      </div>
                   </div>    	       
   				 </div>
        </div>
	    <div class="ui-block-b" style="text-align:center">ovarlayCallOutPanel</div>
	    <div class="ui-block-c" style="text-align:right">
        		<div class="overlay-callout-panel" >
    				<div data-role="button" class="overlay-callout-button">Show options</div>
    				<div class="overlay-callout-content overlay-callout-tr ui-body-b " style="width:300px; text-align:left">
        				<h3>Align it right!</h3>
                        <p>If you want to align it right in header, just add <code>overlay-callout-tr</code> in content div.</p>
        				
                        
                       <code style="font-size:11px;">&lt;div <span>class</span>=<span>&quot;overlay-callout-content overlay-callout-tr ui-body-b&quot;</span>&gt;</code>


                   </div>    	       
   				 </div>
        </div>
      </div>
   
     		
              
		
	</div>
	<div data-role="content">	
		
        <div class="ui-grid-a">
			<div class="ui-block-a">
            	<h3>ovarlayCallOutPanel</h3>
            	 <p>ovarlayCallOutPanel is made to be used in jQuery mobile projects.</p>
                 <p><div data-theme="a" data-role="button" style="width:150px;">Download</div></p>
           </div>
			<div class="ui-block-b">
            <p>Simple usage:</p>
            	<!-- HTML generated using hilite.me --><div style="background: #ffffff; overflow:auto;width:auto;color:black;background:white;border:solid gray;border-width:.1em .1em .1em .8em;padding:.2em .6em;"><pre style="margin: 0; line-height: 125%"><span style="color: #007000">&lt;div</span> <span style="color: #0000C0">class=</span><span style="background-color: #fff0f0">&quot;overlay-callout-panel&quot;</span><span style="color: #007000">&gt;</span>
	<span style="color: #007000">&lt;div</span> <span style="color: #0000C0">data-role=</span><span style="background-color: #fff0f0">&quot;button&quot;</span> <span style="color: #0000C0">class=</span><span style="background-color: #fff0f0">&quot;overlay-callout-button&quot;</span><span style="color: #007000">&gt;</span>Click me!<span style="color: #007000">&lt;/div&gt;</span>
	<span style="color: #007000">&lt;div</span> <span style="color: #0000C0">class=</span><span style="background-color: #fff0f0">&quot;overlay-callout-content ui-body-b&quot;</span><span style="color: #007000">&gt;</span>
		<span style="color: #007000">&lt;h3&gt;</span>Some title...<span style="color: #007000">&lt;/h3&gt;</span>
        <span style="color: #007000">&lt;p&gt;</span>Some content....<span style="color: #007000">&lt;/p&gt;</span>
	<span style="color: #007000">&lt;/div&gt;</span>    	       
<span style="color: #007000">&lt;/div&gt;</span>
</pre></div>
			
            <p>Result:</p>
           
				<div class="overlay-callout-panel">
					<div data-role="button" style="width:200px;" class="overlay-callout-button">Click me!</div>
					<div class="overlay-callout-content ui-body-b" style="width:200px;">
						<h3>Some title...</h3>
        				<p>Some content....</p>
					</div>    	       
				</div>
        
                
            </div>
		</div>
       
        
	</div>
	
</div>












</body>
</html>
